<template>
    <div class="commonConatiner">
        <el-table ref="filterTable" :data="tabledata" style="width: 100%">
            <el-table-column type="expand" width="50">
                <template slot-scope="props">
                    <div class="tableInnerLine">
                        <div class="innerLeft">
                            <div class="leftTop">
                                <el-image :src="props.row.order.goods.goodCoverImg"></el-image>
                            </div>
                            <div class="leftBottom">{{props.row.order.goods.goodName}}</div>
                        </div>
                        <div class="innerRight">
                            <div class="rightInnerInner">
                                <div>工单详细:</div>
                                <div>{{props.row.details}}</div>
                            </div>
                            <div class="rightInnerInner">
                                <div>预期时间:</div>
                                <div>{{props.row.finishitime | timeF}}</div>
                            </div>
                            <div class="rightInnerInner">
                                <div>后备方案:</div>
                                <div>{{props.row.backupsolution}}</div>
                            </div>
                            <div
                                v-show="props.row.serverrate==0?false:true"
                                class="rightInnerInner"
                            >
                                <div>售后评分:</div>
                                <el-rate
                                    v-model="props.row.serverrate"
                                    disabled
                                    text-color="#ff9900"
                                    :score-template="props.row.serverrate"
                                ></el-rate>
                            </div>
                            <div
                                v-show="props.row.serverrate==0?false:true"
                                class="rightInnerInner"
                            >
                                <div>评分留言:</div>
                                <div>{{props.row.ratemessage}}</div>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="order.ordernum" label="对应订单" width="120"></el-table-column>
            <el-table-column prop="owner.username" label="提交用户" width="130"></el-table-column>
            <el-table-column prop="servernumber" label="工单号" width="120"></el-table-column>
            <el-table-column
                prop="servertype"
                label="工单类型"
                width="100"
                :filters="[
                { text: '退货退款', value: '1' }, 
                { text: '物流延迟', value: '2' }, 
                { text: '以旧换新', value: '3' },
                { text: '期内保修', value: '4' },
                { text: '技术求救', value: '5' },
                { text: '其他类型', value: '6' }]"
                :filter-method="filterTag"
                filter-placement="bottom-end"
            >
                <template slot-scope="scope">
                    <el-tag
                        :type="scope.row.tag === '家' ? 'primary' : 'success'"
                        disable-transitions
                    >{{scope.row.servertype | serverStatusFormat}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="add_time" label="提交时间" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.add_time | timeF}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="serverstatus"
                label="工单状态"
                width="100"
                :filters="[
                
                { text: '处理中', value: '1' }, 
                { text: '完结', value: '2' }, 
                { text: '后续处理', value: '3' }]"
                :filter-method="filterServerStatus"
                filter-placement="bottom-end"
            >
                <template slot-scope="scope">
                    <el-tag
                        :type="scope.row.tag === '家' ? 'primary' : 'success'"
                        disable-transitions
                    >{{scope.row.serverstatus | serverstatus}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="solution" label="解决方案"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: ["tabledata"],
    methods: {
        resetDateFilter() {
            this.$refs.filterTable.clearFilter("date");
        },
        clearFilter() {
            this.$refs.filterTable.clearFilter();
        },
        formatter(row, column) {
            return row.address;
        },
        filterTag(value, row) {
            return row.servertype == value;
        },
        filterServerStatus(value, row) {
            return row.serverstatus == value;
        },
        filterHandler(value, row, column) {
            const property = column["property"];
            return row[property] == value;
        }
    }
};
</script>

<style lang="scss" scoped>
.cell {
    text-align: center !important;
}
.el-rate {
    width: 300px;
}
.commonConatiner {
    .tableInnerLine {
        width: 100%;
        height: 250px;
        display: flex;
        justify-content: space-between;
        .innerLeft {
            width: 26%;
            height: 100%;
            .leftTop {
                padding: 5px;
                .el-image {
                    display: inline-block;
                    width: 208px;
                    height: 208px;
                }
            }
            .leftBottom {
                height: 20%;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                font-size: 13px;
                opacity: 0.5;
            }
        }
        .innerRight {
            width: 70%;
            height: 100%;
            .rightInnerInner {
                margin-top: 10px;
                display: flex;
                justify-content: space-around;
                div:nth-child(1) {
                    width: 20%;
                    text-align: right;
                }
                div:nth-child(2) {
                    width: 78%;
                    display: flex;
                }
            }
        }
    }
}
</style>